<template>
  <div class="check-con" id="checkCon">
    <div class="right-content">
      <div style="display: flex;justify-content: flex-end;">
        <el-button type="primary" @click="handleDownload">
          导出为PDF
        </el-button>
      </div>
      <div class="check-info">
        <div class="pdf-mo">
          <Tab000 :orgName="orgName" :orgId="props.currentRow.creditCode" :examineYear="props.currentRow.examineYear"/>
        </div>
        <div class="pdf-mo  no-pd">
          <Tab011 />
        </div>
        <div class="pdf-mo">
          <Tab021 />
        </div>
        <div class="pdf-mo">
          <Tab031 />
        </div>
        <div class="pdf-mo">
          <Tab032 />
        </div>
        <div class="pdf-mo  no-pd">
          <Tab033 />
        </div>
        <div class="pdf-mo">
          <Tab034 />
        </div>
        <div class="pdf-mo ">
          <Tab035 />
        </div>
        <div class="pdf-mo">
          <Tab041 />
        </div>
        <div class="pdf-mo">
          <Tab042 />
        </div>
        <div class="pdf-mo  no-pd">
          <Tab043 />
        </div>
        <div class="pdf-mo">
          <Tab051 />
        </div>
        <div class="pdf-mo">
          <Tab052 />
        </div>
        <div class="pdf-mo">
          <Tab053 />
        </div>
        <div class="pdf-mo">
          <Tab054 />
        </div>
        <div class="pdf-mo">
          <Tab055 />
        </div>
        <div class="pdf-mo">
          <Tab056 />
        </div>
        <div class="pdf-mo">
          <Tab057 />
        </div>
        <div class="pdf-mo">
          <Tab061 />
        </div>
        <div class="pdf-mo">
          <Tab071 />
        </div>
        <div class="pdf-mo">
          <Tab0151 />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

import { ref, reactive, nextTick, provide, onMounted } from 'vue'
import APTMethods from '@/api/yearCheck/mfOrg'

import Tab000 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab000.vue' //封面
import Tab011 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab011.vue' //基础信息
import Tab021 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab021.vue' //负责人信息
//内部建设
import Tab031 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab031.vue' //年度登记、备案
import Tab032 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab032.vue' //本年度会议及换届情况
import Tab033 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab033.vue' //内部管理情况
import Tab034 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab034.vue' //机构设置情况
import Tab035 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab035.vue' //党建工作
//财务会计报告
import Tab041 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab041.vue' //资产负债表
import Tab042 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab042.vue' //业务活动表
import Tab043 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab043.vue' //现金流量表
//业务活动情况
import Tab051 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab051.vue' //年度总结/计划
import Tab052 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab052.vue' //相关收支、职能和本年度举办重大业务活动情况
import Tab053 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab053.vue' //接受捐赠资助和使用情况
import Tab054 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab054.vue' //举办公益慈善活动情况、公益慈善活动支出
import Tab055 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab055.vue' //本年度举办或参与研讨、展览、培训、评比达标表彰等活动的情况

import Tab056 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab056.vue' //支援和计划支援西藏昌都建设
import Tab057 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab057.vue' //参与和计划乡村振兴工作情况

//其他需要说明的情况
import Tab061 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab061.vue' //其它需要说明的情况

//接受检查监督
import Tab071 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab071.vue' //接受监督检查情况
//
import Tab0141 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab0141.vue' //上年度整改情况
import Tab0151 from '@/views/yearCheck/checkResult/components/checkST/checkItem/tab0151.vue' //附件材料


import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
const props = defineProps({
  currentRow: {
    type: Object,
    default: {}
  }
})


defineOptions({
  name: 'logManagement'
})

const emit = defineEmits(['openResult', 'openOpinion'])
const orgName = ref('')
let elementList = []

orgName.value = props.currentRow.organizationBaseName

onMounted(() => {
  elementList = document.getElementsByClassName('pdf-mo');
})

const getDetailInfo = (index) => {
  const { creditCode, organizationType, id } = props.currentRow
  return new Promise((resolve, reject) => {
    APTMethods.getMFInfoByPage({
      id,
      organizationType,
      pageNumberMark: index - 0  //页码
    }).then((res) => {
      resolve(res)
    })
  })
}

// 提供方法给子组件
provide('getDetailInfo', { getDetailInfo });

const handleDownload = () => {
  const loading = ElLoading.service({
    lock: true,
    text: '下载中...',
    background: 'rgba(0, 0, 0, 0.2)'
  })

  const pdf = new jsPDF('p', 'mm', 'a4');

  // 遍历所有元素

  setTimeout(() => {
    elementList.forEach((element, index) => {
      // const element = document.getElementById(elementId);
      if (!element) return; // 如果元素不存在，跳过

      // 将元素转换为canvas
      html2canvas(element, {
        dpi: 300, // 设置截图的分辨率
        scale: 300 / 96, // 设置截图缩放比例，以适应pdf的dpi
        //html2canvas的配置项提供了一个回调函数 ignoreElements， 他的作用就是过滤节点的， html2canvas 他会对你的dom树进行循环，
        //每次循环都会调用一次 ignoreElements，ignoreElements接收一个参数就是当前循环到的dom,
        //当你返回true就不会循环这个节点的子节点了，意思就是过滤了当前节点，反之则保留当前节点继续向下循环。
        ignoreElements: e => {
          if (
            e.contains(element) ||
            element.contains(e) ||
            e.tagName === 'HEAD' ||
            e.tagName === 'STYLE' ||
            e.tagName === 'LINK' ||
            e.getAttribute('data-html2canvas') != null // header里面的样式不能筛掉</div>
          ) {
            return false;
          } else {
            return true;
          }
        }
      }
      ).then(canvas => {
        const imgData = canvas.toDataURL('image/jpeg');
        // 如果不是第一页，添加新页
        if (index > 0) {
          pdf.addPage();
        }

        // 将canvas图片添加到PDF
        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);

        // 如果是最后一个元素，保存PDF
        if (index === elementList.length - 1) {
          pdf.save('export.pdf');
          loading.close()
        }
      });
    });
  }, 200)

};

defineExpose({
  handleDownload
});
</script>

<style lang="scss" scoped>
.right-content {
  width: 100%;
}

::v-deep .el-dialog {
  margin-bottom: 0;
}

::v-deep .el-dialog__body {
  padding-top: 0 !important;
}

table.m-table {
  border-spacing: 0px;
  width: 100%;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  color: #000;

  thead {
    background: #f0f7fc;
    color: rgb(37, 43, 53);

    th {
      border-right: 1px solid #999;
      border-bottom: 1px solid #999;
      text-align: center;
      height: 32px;
    }
  }


  td {
    height: 32px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    text-align: center;

    &.td-head {
      background: #f0f7fc;
    }
  }
}
</style>
<style lang="scss" scoped>
//隐藏滚轮
::v-deep .el-switch.is-disabled {
  opacity: 1;
}

::v-deep .el-descriptions__title {
  margin-top: 15px;
}

.check-con {
  width: 100%;
  // height: 500px;
  // padding: 0 50px;
  overflow: auto;
  box-sizing: border-box;
  display: flex;

  ::-webkit-scrollbar {
    width: 0;
  }

  //将宽度设为0，滚动条就会隐藏。
  ::-webkit-scrollbar {
    display: none;
  }

  .left-tree {
    width: 280px;
    padding: 20px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
    font-size: 12px;
    box-sizing: border-box;
    height: 600px;
    overflow: auto;
    border: 1px solid #eee;
  }

  .check-info {
    flex: 1;
    padding-right: 20px;
    color: #000;
    padding: 0 80px;

    >div {
      transition: all 0.5s ease-in-out;
      width: 90%;
      margin: 0 auto;
      padding: 0 50px;
      padding-top: 200px;

      &.no-pd {
        padding-top: 10px;
      }
    }
  }
}

.msg-tip {
  padding: 20px 0;
  color: #000;
  font-family: '微软雅黑';
}
</style>
